<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>

<body>
    <button id="reset">重新开始一局游戏</button><br> 
    请输入要猜的数字: <input type="text" id="guessNumber"><input type="button" value="猜" id="guess"><br>
    已经猜的次数: <span id="count">0</span><br>
    结果:<span id="result"></span>

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        // 1. 生成随机数 1-100,floor是取整
        let randomNumber=Math.floor(Math.random()*100)+1;//random生成的是[0,1),接近1但永远到不了1
        console.log(randomNumber);
        let count=0;
        $("#guess").click(function(){
            // 猜的次数,每次点击"猜"按钮,就会+1
            count++;
            $("#count").text(count);
            // 猜的结果
            let guessNumber=$("#guessNumber").val();
            if(randomNumber<guessNumber) {
                $("#result").text("猜大了!");
                $("#result").css("color","red");
            } else if(randomNumber>guessNumber) {
                $("#result").text("猜小了!");
                $("#result").css("color","red");
            } else {
                $("#result").text("猜对了!");
                $("#result").css("color","green");
            }
        });
        $("#reset").click(function(){
            // 重置随机数
            randomNumber=Math.floor(Math.random()*100)+1;//random生成的是[0,1),接近1但永远到不了1
            console.log(randomNumber);
            // 重置次数
            count=0;
            $("#count").text(count);
            $("#guessNumber").val("");
            $("#result").text("");
        });

    </script>
</body>

</html>